<template>
<el-col :span="24" class="header">
    <el-col :span="10" class="logo" :class="getCollapse?'logo-collapse-width':'logo-width'">
        {{getCollapse?'':sysName}}
    </el-col>
    <el-col :span="10">
        <div class="tools" @click.prevent="collapse">
            <i class="fa fa-align-justify"></i>
        </div>
    </el-col>
    <el-col :span="4" class="userinfo">
        <el-dropdown trigger="hover"  v-if="getUser.userId">
            <span class="el-dropdown-link userinfo-inner">
                <!-- <img :src="this.showUrl+ getUser.headImgPath" /> -->
                 {{getUser.userName}}</span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item divided @click.native="updateUserInfo">修改密码</el-dropdown-item>
                <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </el-col>
</el-col>
</template>

<script>
import {
    mapGetters
} from 'vuex'
import {
    mapActions
} from 'vuex'
import {
    showUrl
} from "@/api/api";
import {
    parse
} from "path";

export default {
    name: "CommonHeader",
    data() {
        return {
            sysName: '社区门诊',
            sysUserName: '',
            sysUserAvatar: '',
            showUrl: showUrl,
        }
    },
    computed: {
        ...mapGetters('moduleA', [
            'getCollapse'
        ]),
        ...mapGetters('user', [
            'getUser'
        ])
    },
    methods: {
        //退出登录
        logout: function () {
            var _this = this;
            this.$confirm('确认退出吗?', '提示', {
                //type: 'warning'
            }).then(() => {
                this.update({
                    userId: null,
                    userName:null,
                    userType: null,
                    headImgPath:null
                });
                this.$router.replace({
                    path: '/login',
                    query: {
                        redirect: this.$router.currentRoute.fullPath
                    }
                });

            }).catch(() => {

            });

        },
        updateUserInfo: function () {
            this.$router.push({
                path: '/updateUserInfo',
            })
        },
        ...mapActions("moduleA", [
            'collapse',
        ]),
        ...mapActions("user", [
            "update"
        ])

    },
    mounted() {
        var user = sessionStorage.getItem('user');
        if (user) {
            user = JSON.parse(user);
            console.log(user);
            this.sysUserName = user.name || '';
            this.sysUserAvatar = user.avatar || '';
        }
    }
}
</script>
